<template>
  <div class="page-header-index-wide">
    <a-card title="订单概况" class="border-no box-shadow-5 clearfix">
      <div slot="extra">
        <a-range-picker class="margin10R"
          :default-value="[moment(startDay, 'YYYY-MM-DD'), moment(endDay, 'YYYY-MM-DD')]"
          @change="datepickerchange"
        ></a-range-picker>
        <a-button type="primary" @click="getData">查询</a-button>
      </div>
      <div class="pad10 clearfix">
        <a-card-grid class="block-pub clearfix" :hoverable="false">
          <div class="tit">自习室浏览量</div>
          <div class="num">{{ visMap.visCnt }}</div>
          <div class="detail">环比增长：<span :style="{color: visMap.add?'red':'green'}">{{ visMap.percent }}%</span>
          </div>
        </a-card-grid>
        <a-card-grid class="block-pub clearfix" :hoverable="false">
          <div class="tit">自习室访客数</div>
          <div class="num">{{ userMap.userCnt }}</div>
          <div class="detail">环比增长：<span :style="{color: userMap.add?'red':'green'}">{{ userMap.percent }}%</span>
          </div>
        </a-card-grid>
        <a-card-grid class="block-pub clearfix" :hoverable="false">
          <div class="tit">座位订单数</div>
          <div class="num">{{ orderMap.orderTotalCnt }}</div>
          <div class="detail">环比增长：<span :style="{color: orderMap.add?'red':'green'}">{{ orderMap.percent
            }}%</span></div>
        </a-card-grid>
        <a-card-grid class="block-pub clearfix" :hoverable="false">
          <div class="tit">订单支付数</div>
          <div class="num">{{ orderPayMap.orderPaylCnt }}</div>
          <div class="detail">环比增长：<span :style="{color: orderPayMap.add?'red':'green'}">{{ orderPayMap.percent
            }}%</span>
          </div>
        </a-card-grid>
        <a-card-grid class="block-pub clearfix" :hoverable="false">
          <div class="tit">微信支付金额</div>
          <div class="num">{{ wxMap.wxAmt }}</div>
          <div class="detail">环比增长：<span :style="{color: wxMap.add?'red':'green'}">{{ wxMap.percent }}%</span>
          </div>
        </a-card-grid>
        <a-card-grid class="block-pub clearfix" :hoverable="false">
          <div class="tit">余额支付金额</div>
          <div class="num">{{ balanceMap.balAmt }}</div>
          <div class="detail">环比增长：<span :style="{color: balanceMap.add?'red':'green'}">{{ balanceMap.percent
            }}%</span></div>
        </a-card-grid>
        <a-card-grid class="block-pub clearfix" :hoverable="false">
          <div class="tit">卡券支付金额</div>
          <div class="num">{{ coupMap.coupAmt }}</div>
          <div class="detail">环比增长：<span :style="{color: coupMap.add?'red':'green'}">{{ coupMap.percent
            }}%</span></div>
        </a-card-grid>
        <a-card-grid class="block-pub clearfix" :hoverable="false">
          <div class="tit">优惠券支付金额</div>
          <div class="num">{{ voucherMap.voucherAmt }}</div>
          <div class="detail">环比增长：<span :style="{color: voucherMap.add?'red':'green'}">{{ voucherMap.percent
            }}%</span></div>
        </a-card-grid>
        <a-card-grid class="block-pub clearfix" :hoverable="false">
            <div class="tit">退款金额</div>
            <div class="num">{{ backAmtMap.amt }}</div>
            <div class="detail">环比增长：<span :style="{color: backAmtMap.add?'red':'green'}">{{ backAmtMap.percent
              }}%</span></div>
        </a-card-grid>
        <a-card-grid class="block-pub clearfix" :hoverable="false">
          <div class="tit">退款订单数</div>
          <div class="num">{{ backCntMap.cnt }}</div>
          <div class="detail">环比增长：<span :style="{color: backCntMap.add?'red':'green'}">{{ backCntMap.percent }}%</span></div>
        </a-card-grid>
      </div>

    </a-card>
    <div class="bg-white box-shadow-5 margin10T clearfix">
      <v-chart :forceFit="true" :height="400" :padding="padding" :data="orderData" :scale="scale">
        <v-tooltip />
        <v-legend
          :custom="true"
          :items="legendItems"
        />
        <v-axis
          data-key="订单金额"
          :label="axisLabel"
        />
        <v-bar position="type*订单金额" color="#1890FF" />
        <v-smooth-line position="type*访问量" color="#fdae6b" :size="gemoSize" />
        <v-point shape="circle" position="type*访问量" color="#fdae6b" :size="gemoSize" />
      </v-chart>
    </div>
  </div>
</template>

<script>
import moment from 'moment'
import { ChartEventMixins } from '@/components/chart/mixins/ChartMixins'
import LineChartMultid from '@/components/chart/LineChartMultid'
import { orderAnalysis, orderCharts, userAnalysis, userCharts } from '@/api/api'

export default {
  name: 'OrderAnalysis',
  components: {
    LineChartMultid
  },
  data() {
    return {
      padding:[40,50,70,50],
      startDay: '',
      endDay: '',
      backAmtMap: {},
      backCntMap: {},
      balanceMap: {},
      coupMap: {},
      orderMap: {},
      orderPayMap: {},
      userMap: {},
      visMap: {},
      voucherMap: {},
      wxMap: {},
      orderFields: ['订单金额', '访问量'],
      orderData: [],
      scale: [{
        dataKey: '订单金额',
        min: 0
      }, {
        dataKey: '访问量',
        min: 0
      }],
      axisLabel: {
        textStyle: {
          fill: '#fdae6b'
        }
      },
      gemoSize: 3,
      legendItems: [
        { value: '订单金额', marker: { symbol: 'square', fill: '#3182bd', radius: 5 } },
        { value: '访问量', marker: { symbol: 'hyphen', stroke: '#fdae6b', radius: 5, lineWidth: 3 } }
      ]
    }
  },
  created() {
    this.endDay = moment(Date.now()).format('YYYY-MM-DD')
    this.startDay = moment(Date.now()).add('-1', 'weeks').format('YYYY-MM-DD')
    this.getData()
  },
  methods: {
    moment,
    datepickerchange(date, dateString) {
      this.startDay = dateString[0]
      this.endDay = dateString[1]
    },
    getData() {
      let params = {
        'startDay': this.startDay,
        'endDay': this.endDay
      }
      orderAnalysis(params).then(res => {
        if (res.success) {
          let result = res.result
          this.backAmtMap = result.backAmtMap
          this.backCntMap = result.backCntMap
          this.balanceMap = result.balanceMap
          this.coupMap = result.coupMap
          this.orderMap = result.orderMap
          this.orderPayMap = result.orderPayMap
          this.userMap = result.userMap
          this.visMap = result.visMap
          this.voucherMap = result.voucherMap
          this.wxMap = result.wxMap
        }else{
          this.backAmtMap = {}
          this.backCntMap = {}
          this.balanceMap = {}
          this.coupMap = {}
          this.orderMap = {}
          this.orderPayMap = {}
          this.userMap = {}
          this.visMap = {}
          this.voucherMap = {}
          this.wxMap = {}
        }
      })
      orderCharts(params).then(res => {
        this.orderData = res.result
      })
    }
  }
}
</script>

<style lang="less" scoped>
@import "../../assets/less/pub";

.circle-cust {
  position: relative;
  top: 28px;
  left: -100%;
}

.extra-wrapper {
  line-height: 55px;
  padding-right: 24px;

  .extra-item {
    display: inline-block;
    margin-right: 24px;

    a {
      margin-left: 24px;
    }
  }
}

/* 首页访问量统计 */
.head-info {
  position: relative;
  text-align: left;
  padding: 0 32px 0 0;
  min-width: 125px;

  &.center {
    text-align: center;
    padding: 0 32px;
  }

  span {
    color: rgba(0, 0, 0, .45);
    display: inline-block;
    font-size: .95rem;
    line-height: 42px;
    margin-bottom: 4px;
  }

  p {
    line-height: 42px;
    margin: 0;

    a {
      font-weight: 600;
      font-size: 1rem;
    }
  }
}
</style>